<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 620px;
        height: 400px;
        border: 1px solid rgb(180, 248, 228);
    }
</style>
<script src="./echarts.min.js"></script>

<body>
    <!-- 准备一个div  有高宽 -->
    <div class="box"></div>
</body>
<script>
    // 选择节点
    let dom = document.querySelector(".box")
    // 初始化
    let myChart = echarts.init(dom)
    console.log(myChart);
    // 设置配置项
    let option = {
        title: {
            text: "线性图标"
        },
        xAxis: {
            type: 'category',  // 当前坐标轴为类目轴
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
            type: "value", //  当前坐标轴为数值轴
        },
        //  图例
        legend: {
           left:"35%",
           bottom:0,
        },   
        // 提示
        tooltip: {
            trigger:"axis",  //   鼠标放在坐标轴的时候   显示tooltip
            axisPointer:{
                type:"cross",   //  十字交叉类型
                label:{       //  pointer的文字和背景色样式
                    color:"#f9c3c5",
                    backgroundColor:"#dddffc"
                }, 
            },
            backgroundColor:"rgba(225, 213, 227,0.7)", //  tooltip的背景色
            textStyle:{
                color:"#fefefe"   //  tooltip文字
            }
        },
        // 系列
        series: [
            {
                type: "line",
                data: [150, 230, 220, 210, 140, 160, 260],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(216, 152, 184,0.4)"
                },
                name: "数学"
            },
            {
                type: "line",
                data: [150, 200, 220, 230, 140, 100, 200],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(255, 222, 233,0.4)"
                },
                name: "语文"
            },
            {
                type: "line",
                data: [100, 150, 270, 290, 200, 150, 90],
                // 设置面积图的背景色
                areaStyle:{
                    color:"rgba(180, 248, 300,0.4)"
                },
                name: "英语"
            },
            // {
            //     type:"line",
            //     data:[120,250,270,200,160,180,190],
            //     name:"综合"
            // }
        ], 
        grid: {   //   网络相关
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true,  //  显示坐标轴的表情
        },

    }
    //  使用配置项
    myChart.setOption(option)  
</script>

</html>